<template>
  <div>
    <el-drawer
      :title="team_is_add?'增加用户' : '编辑用户'"
      :visible.sync="value.visible"
      direction="rtl"
      :before-close="onClose"
      :wrapperClosable="false"
    >
      <el-row :gutter="15" v-if="!team_is_add">
        <el-col :span="6">
          <span>用户编号</span>
        </el-col>
        <el-col :span="12">
          <el-input v-model="team_data.id" disabled></el-input>
        </el-col>
      </el-row>
           <el-row :gutter="15" v-if="team_is_add">
        <el-col :span="6">
          <span>用户名称</span>
        </el-col>
        <el-col :span="12">
          <el-input v-model="team_data.userName"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="6">
          <span>用户角色</span>
        </el-col>
        <el-col :span="12">
          <el-select v-model="team_data.teamRole" placeholder="请选择角色">
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="教师" value="teacher"></el-option>
            <el-option label="班长" value="monitor"></el-option>
            <el-option label="学生" value="student"></el-option>
          </el-select>
        </el-col>
      </el-row>

        <el-row :gutter="15">
        <el-col :span="6">
          <span>写入权限</span>
        </el-col>
        <el-col :span="12" style="line-height: 40px;">
          <el-switch v-model="team_is_allow_spaceWrite" ></el-switch>
        </el-col>
      </el-row>
          <el-button type="primary" style="margin-left: 20px;" @click="onOk()">{{this.team_is_add ? '立即创建' : '立即保存' }}</el-button>
          <el-button @click="onClose()">取消</el-button>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import { addTeam } from '@/api/requests/team.js'

export default {
  props: ['value'],
  data () {
    return {
      team_data: {},
      team_is_allow_spaceWrite:false,
      team_is_add:false,

    }
  },
  watch: {
    value (val) {
      if (val.visible) {
        this.team_data = JSON.parse(JSON.stringify(val.data))
        // this.team_data.teamRole = 'student'
        if(this.team_data.id == undefined){
          this.team_is_add = true
        }
        if(this.team_data.spaceWrite == 0){
            this.team_is_allow_spaceWrite = true
        }
      }
    }
  },
  created () {
  },
  methods: {
    onOk(){
      this.team_Save_Team()
      this.onClose()
    },
    onClose () {
      this.$emit('input', {
        visible: false,
        data: {
          over:true
        }
      })
    },
    team_Save_Team(){
      let temp =  this.team_is_allow_spaceWrite ? 0 : 1
      this.team_data.spaceWrite = temp
      console.log(this.team_data)
      addTeam(this.team_data).then(res => {
          if (res.code == 200) {
          let msg = '编辑成功'
          if (this.team_is_add) {
              msg = '添加成功'
          }
          this.$message({
              message: msg,
              type: 'success'
          })
       } else {
          this.$message.error('出现异常,请重试');
        }
      })



    }
  },

}
</script>
<style lang="scss" scoped>
.el-drawer {
    padding: 20px;
    .el-form-item__label {
        width: 100px;
    }
    span {
        margin-left: 20px;
        line-height: 40px;
    }
    .el-row {
        margin-bottom: 10px;
    }
    .el-switch {
        line-height: 40px;
    }
}
</style>
